<template>
  <div class="map-wrap">
    <GoogleMap :api-key="googleKey" style="width: 100%; height: 500px" :center="center" :zoom="14">
      <Marker :options="{ position: center }" />
    </GoogleMap>
  </div>
</template>

<script lang="ts" setup>
  import { useRoute } from 'vue-router';
  import { ref, reactive, onMounted } from 'vue';
  import { GoogleMap, Marker } from 'vue3-google-map';

  const center = ref({});
  const googleKey = ref('AIzaSyAlPNYEUxpg-gT7l4RlvcdpNpPt71F6dt8'); // google map授权key

  const route = useRoute();
  onMounted(() => {
  });
</script>

<style lang="less" scoped>
  .map-wrap {
    position: relative;
    width: 100%;
    height: 100%;
  }
</style>
